<template>
    <div class="container">
        <div class="form-box">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="名称">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="电话号">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="form.trueName" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idCard"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.account"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="登录号类型：" prop="loginType">
                    <el-select v-model="form.loginType" @change="handleBrandChange" placeholder="请选择分销商">
                        <el-option v-for="item in loginType" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="1"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadLogoSuccess"
                            :on-error="uploadError"
                            :data="pdfData"
                            :file-list="logolist"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.headImageUrl">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label-width="255px">
                    <el-button type="primary" @click="onSubmit(form)">点击修改商品</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    const util = require('../../../utils/geturlkey');
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';

    export default {
        name: 'addVoucher',
        data() {
            return {
                parentId: 0,
                parentid: 0,
                loginType:[{
                    value:1,
                    label:'小程序登录/公众号登录'
                },{
                    value:2,
                    label:'前端手机号密码登录'
                },{
                    value:3,
                    label:'后端帐号密码登录'
                }],
                parentids: [],
                categoryIds: [],
                imageUrl: '',
                imglist: [],
                ortool: true,
                distributorIds: [],
                productCateOptions: [],
                selectProductCateValue: [],
                productCategoryId: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
                logolist: [],
                pdfData: {
                    type: 1,
                    path: 1
                },
                submit: {
                    detailBanner: ''
                },
                fromId: '',
                myHeaders: {},
                form: {
                    detailBanner: ''
                },
                distributorId: '',
                oldNumber: 0,
                filterAttrs: [],
                brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
                brandOptions: []
            };
        },
        created() {
            this.uploadsrc = uploadsrc;
            let id = util.getUrlKey('id');
            if (id == null || id == '') {
                layer.alert('未获取到参数ID', {
                    icon: 2,
                    skin: 'layer-ext-moon'
                }, function() {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }
            userDetail(id).then(res => {
                if (res.returnCode == 200) {
                    this.form = res.data;
                    this.logolist = [];
                    if (res.data.headImageUrl) {
                        this.logolist = [{
                            url: res.data.headImageUrl
                        }];
                    }
                } else {
                    layer.alert(res.returnMsg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    }, function() {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
        },

        methods: {
            onSubmit(row) {
                userUpdate(row).then(res => {
                    if (res.returnCode == 200) {
                        layer.alert('修改成功', function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        layer.alert(res.returnMsg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                    layer.close(index);
                });
            },
            uploadError(data) {
                this.$message.success(`上传失败，请重新上传`);
            },
            uploadLogoSuccess(data) {
                if (data.returnCode == 200) {
                    this.form.headImageUrl = data.data;
                } else {
                    this.$message.success(`上传失败，请重新上传`);
                }
            },
            getmyHeaders() {
                var dHeader = dynamicHeader();
                this.myHeaders.signature = dHeader.signature;
                this.myHeaders.nonce = dHeader.nonce;
                this.myHeaders.timestamp = dHeader.timestamp;
                this.myHeaders.appkey = dHeader.appkey;
                this.myHeaders.token = dHeader.token;
            },
            handleBeforeUpload(file) {
                this.handleimgtype(file);
                this.getmyHeaders();
            },
            handleimgtype(file) {
                if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                    });
                    return false;
                }
                let size = file.size / 1024 / 1024 / 2;
                if (size > 2) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于2M'
                    });
                    return false;
                }
            },
            cancel() {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            }
        }
    };
</script>